<template>
 
    <div class="express">
      <!-- <transition name="fade"> -->
        <div class="title" :class="isShow ? 'active' : ''">
          {{ props.item.title }}
        </div>
        <div  :class="isShow ? 'text' : 'notext'">{{ props.item.text }}</div>
      <!-- </transition> -->
      <div class="time">{{ props.item.time }}</div>
      <div class="icon" @click="change"><img :src="icon" alt="" /></div>
    </div>
</template>

<script setup>
import plusIcon from "@/assets/images/icon_plus.png"; 
import lessIcon from "@/assets/images/less.png";
const props = defineProps({
  item: {
    type: Object,
    default: {},
  },
  Type: {
    type: Boolean,
    default: false, // left or right
  },
});
const icon = ref("");
const imgs = ref([
  plusIcon,
  lessIcon,
]);
const isShow = ref(true);
const change = () => {
  isShow.value = !isShow.value;
  console.log(isShow.value);
  if (isShow.value == true) {
    icon.value = imgs.value[1];
  } else {
    icon.value = imgs.value[0];
  }
};
onMounted(() => {
  isShow.value = props.Type;
  isShow.value == true
    ? (icon.value = imgs.value[1])
    : (icon.value = imgs.value[0]);
});
</script>

<style scoped lang="scss">
.active {
  color: $green !important;
  transition: all 0.3s ease; /* 添加渐变动画 */
}
.express {
  padding: 0px 70px 30px 0;
  border-bottom: 2px solid $bordergrey;
  position: relative;
}
.title {
  font-size: 30px;
  font-weight: bold;
  line-height: 72px;
  color: #000;
}
.text {
  padding-bottom: 40px;
  text-align: justify;
  font-size: 18px;
  color: #787878;
  transition: all 0.3s ease-in-out; /* 添加渐变动画 */
  //透明度
  opacity: 1;
}
.notext{
  height: 0;
  
  opacity: 0;
}

  .time {
  font-size: 18px;
  color: #9a9a9a;
  margin-top: 10px;
}
.icon {
  width: 24px;
  height: 24px;
  position: absolute;
  right: 0;
  top: 15px;
  
  > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 1s ease; /* 添加渐变动画 */
  }
}

</style>
